<template>
    <section>
        <!--导航栏-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getDepartments">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180" sortable>
            </el-table-column>
            <el-table-column prop="sn" label="编号" width="120" sortable>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="100" sortable>
                <template scope="scope">
                    <span style="color: green" v-if="scope.row.state ==0">正常</span>
                    <span style="color: red" v-else-if="scope.row.state ==-1">禁用</span>
                    <span style="color: gray" v-else>未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="manager.username" label="管理员" width="120" sortable>
            </el-table-column>
            <el-table-column prop="parent.name" label="父部门" width="120" sortable>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


    </section>
</template>







<script>
    import { getDepartmentListPage, removeDepartment, batchRemoveDepartment, editDepartment, addDepartment } from '../../api/api';
    export default {
        // 返回数据
        data() {
            return{
                departments:[],
                total:0,
                listLoading:false,
                filters:{
                    keyword:""
                }
            }
        },
        // 方法全写这
        methods: {
            getDepartments(){
               let para = {
                   keyword:this.filters.keyword

               };
                this.listLoading=true;
               this.$http.post("/department",para)
                   .then(result=>{
                       result=result.data;
                      this.departments=result.rows;
                      this.total=result.total;
                       this.listLoading=false;
                   })
                   .catch()(result=>{
                      this.$message({
                          message:"系统忙",
                          type:"error"
                      })
                   })
            }


        },
        // 钩子函数
        mounted() {
             this.getDepartments();
        }





    }
</script>








<style scoped>

</style>